<% include partials/header %>

<style>
    #mount-node {
        min-height: 500px;
    }
    code {
        padding: 2px 4px;
        font-size: 90%;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 2px;
    }
</style>
<div class="next-demo-section">
    <div id="mount-node" role="main"></div>
    <div id="next-demo-reloading">Reloading....</div>
</div>
<div class="next-demo-section">
    <div id="component-desc"></div>
</div>
<div class="next-demo-section">
    <div id="component-body"></div>
</div>
<% if (disableAnimation) { %>
<style>
    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important;
    }
</style>
<% } %>
<script>
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback) {
            setTimeout(callback, 0);
        };
    }
</script>
<script src="//shadow.elemecdn.com/npm/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
<script src="//shadow.elemecdn.com/npm/react@16.13.0/umd/react.development.js"></script>
<script src="//shadow.elemecdn.com/npm/react-dom@16.13.0/umd/react-dom.development.js"></script>
<script src="//shadow.elemecdn.com/npm/moment@2.24.0/min/moment-with-locales.js"></script>
<script>
    window.mountNode = document.getElementById('mount-node');
</script>
<% scripts.forEach(function(src) { %>
<script src="<%= src %>"></script>
<% })%> <% include partials/footer %>
